import scroller from './scroller';

function init() {
    const $about = $('#section-about');
    const $aboutNavs = $('li', $about);
    let scrollers, swiperInited;
    const aboutSwiper = new Swiper('#swiper-about', {
        loop: true,
        slidesPerView: 3,
        centeredSlides: true,
        simulateTouch: false,
        pagination: {
            el: '.swiper-pagination',
            renderBullet: (current, className) => {
                return `<span class="${className}"></span>`;
            }
        },
        on: {
            slideChange: function() {
                if (swiperInited) {
                    const activeIndex = this.slides[this.activeIndex].dataset
                        .scroller;
                    scrollers.forEach((sc, i) => {
                        if (i == activeIndex) {
                            sc.enable();
                        } else {
                            sc.disable();
                        }
                    });
                } else {
                    swiperInited = true;
                }
            }
        }
    });

    $about.on('click', '.header-nav li', function() {
        const $el = $(this);
        aboutSwiper.slideToLoop($el.data('index'));
        $aboutNavs.removeClass('active');
        $el.addClass('active');
    });

    const $contents = document.querySelectorAll('#section-about .scroller');
    scrollers = Array.prototype.map.call($contents, (el, i) => {
        el.parentElement.dataset.scroller = i;
        return scroller(el);
    });
    scrollers.forEach(s => s.disable());
}

export default init;
